<html>
	<head>
		<title>Groups</title>
		<link rel="stylesheet" href="../css/style.css" media="screen" />
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen" />
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
	</head>
	<body class="claro">
		<input id="groups" />
		<script src="/getJS?item=createMenu"></script>
		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button",
				"dijit/form/TextBox", "dojo/keys", "dojo/request", "dijit/focus", "dojo/dom", "dojox/grid/DataGrid", "dojo/store/Memory",
				"dojo/data/ObjectStore", "dijit/MenuBar", "dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem", "dijit/DropDownMenu", 
				"dijit/MenuBarItem", "dijit/form/MultiSelect", "dijit/form/ComboBox", "dojo/request", "dojo/json"], 
				function(ready, BorderContainer, ContentPane, Button, TextBox, keys, request, focusUtil, dom,
					DataGrid, Memory, ObjectStore, MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu, MenuBarItem, MultiSelect, ComboBox, request, JSON){
					ready(function() {
						var bc = new BorderContainer({style: "width: 100%; height: 100%;"});
						var top = new ContentPane({
							region: "top",
							content: createMenu(request, JSON).domNode});
						var leading = new ContentPane({
							region: "leading",
							style: "height: 100%; width 49%;",
							content: ""});
						var trailing = new ContentPane({
							region: "trailing",
							style: "height: 100%; width 49%;",
							content: ""});
						/*var center = new ContentPane({
							region: "center",
							content: ""});*/
						//bc.addChild(center);
						bc.addChild(top);
						bc.addChild(leading);
						bc.addChild(trailing);
						var createGroup = new Button({
							id: "createGroup",
							name: "createGroup",
							label: "Create Group",
							onClick: function() {
							
							}});
						var group = new TextBox({
							id: "group",
							placeHolder: "Group Name",
							style: "width: 100%;",
							onKeyPress: function(e) {
								if (e.keyCode == keys.ENTER) {
								
								}
							}});
						var users = new MultiSelect({
							id: "users"
							});
							
						/*request.post("users",{
							handleAs: "json"}).then(function(data){
								for(var i = 0; i < data.length; i++){
									column = data[i];
									var attr = dom.byId('users');
									var c = win.doc.createElement('option');
									c.innerHTML = column[0];
									c.value = column[1];
									attr.appendChild(c);
								}
							});*/
							
						var transferUsers = new Button({
							id: "transferUsers",
							label: "Transfer",
							onClick: function () {
							
							}});
						var findGroups = new ComboBox({
							id: "groups",
							placeHolder: "Group",
							searchAttr: "name"}, "groups");
							
						function updateGroups() {
							var items = {data:[]}
							//console.log(items[data])
							var fields = []
							for (var i = 0; i < data.length; i++) {
								var item = data[i];
								fields = fields.concat([{name:item, id:item}]);
							}
							var items = {data:fields}
							var dataStore = new Memory(items);
							registry.byId("groups").set("store", dataStore);
							registry.byId("groups").set("searchAttr", "name");
						}
						leading.set("content", [
							//findGroups.domNode,
							users.domNode]);
						trailing.set("content", [
							group.domNode,
							createGroup.domNode,
							transferUsers.domNode]);
						document.body.appendChild(bc.domNode);
						bc.startup();
					});
				});
		</script>
	</body>
</html>